<!--所有APP打开的容器-->

<template>

  <div class="allAppContainer">
    <VueDragResize :isActive="false"
                   :stickSize="5" :w="800" :h="500" :z="30"
                   :minh="400"
                   :minw="400"
                   :isDraggable="isDraggable"
                   v-on:resizing="resize"
                   v-on:dragging="resize"
                   @componentMounted="componentMounted">

      <div class="contentContainer">
        <div class="left">
          <div class="header">
            <slot name="search"></slot>
          </div>
          <div class="menu" @mousedown.stop>
            <slot name="menu"></slot>
          </div>
        </div>
        <div class="right">
          <div class="header">
            <div class="windowsHandleContainer">
              <!--        多窗口插槽-->
              <slot name="windowsHandle"></slot>
            </div>
            <div class="winSetSize">
              <div class="winSetIconContainer">
                <img class="winSetIcon" src="@/assets/img/common/minus-bold.png" alt="">
              </div>
              <div class="winSetIconContainer">
                <img class="winSetIcon" src="@/assets/img/common/fullscreen-expand.png" alt="">
              </div>
              <div class="winSetIconContainer winSetIconContainerClose">
                <img class="winSetIcon" src="@/assets/img/common/close-bold.png" alt="">
              </div>
            </div>

          </div>
          <div class="main" @mousedown.stop>
            <slot slot="main"></slot>
          </div>
        </div>

      </div>
    </VueDragResize>
  </div>

</template>


<script setup>

import {ref} from "vue";

// import VueDragResize from 'vue-drag-resize/src'
import VueDragResize from '@/components/appContainers/containerBase.vue'

const w = ref(0)
const h = ref(0)
const top = ref(0)
const left = ref(0)
const isDraggable = ref(true)

// 加载完成获取尺寸大小
const componentMounted = (rect) => {
  w.value = rect.width
  h.value = rect.height
  top.value = rect.top
  left.value = rect.left
  console.log(h.value)
}

// resize时获取尺寸大小
const resize = (newRect) => {
  w.value = newRect.width
  h.value = newRect.height
  top.value = newRect.top
  left.value = newRect.left
  console.log(h.value)
}


</script>

<style scoped>
.allAppContainer {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.contentContainer {
  display: flex;
  flex-direction: row;

  .header {
    height: 35px;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-between;
  }


  .left {
  //padding: 10px; height: 100%; width: 200px; height: 100%;
    height: v-bind(h + 'px');
    width: 200px;

  }

  .right {
    height: v-bind(h + 'px');
    width: calc(100% - 200px);
  }


}


.winSetSize {
  display: flex;

  .winSetIconContainer {
    height: 35px;
    width: 40px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: #4104f1;
    }
  }

  .winSetIconContainerClose {
    border-top-right-radius: var(--custom-border-radius);

    &:hover {
      border-top-right-radius: var(--custom-border-radius);
      background-color: #4104f1;
    }
  }

  .winSetIcon {
    height: 20px;
  }
}

.menu {
  height: calc(100% - 35px);
  border-bottom-left-radius: var(--custom-border-radius);
}

.main {
  background-color: #445477;
  height: calc(100% - 35px);
  border-bottom-right-radius: var(--custom-border-radius);
}


</style>
